<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>countdown</title>
    <link rel="stylesheet" type="text/css" href="./index.css">
    <script type="text/javascript" src="../bower_components/jquery/dist/jquery.min.js"></script>
    <script type="text/javascript" src="../bower_components/jquery.countdown/dist/jquery.countdown.min.js"></script>
</head>
<body>

<div id="count_down" class="plugin__countdown">
    <h4 class="plugin__count--header">Remaining</h4>
    <ul>
        <li class="plugin__count--item">
            <span class="plugin__count--number">2</span>
            <span class="plugin__count--number">1</span>
            <span class="plugin__count--label">h</span>
        </li>
        <li class="plugin__count--item">
            <span class="plugin__count--number">3</span>
            <span class="plugin__count--number">9</span>
            <span class="plugin__count--label">m</span>
        </li>
        <li class="plugin__count--item">
            <span class="plugin__count--number">3</span>
            <span class="plugin__count--number">9</span>
            <span class="plugin__count--label">s</span>
        </li>
    </ul>
</div>

<div id="count_down1" class="plugin__countdown plugin__countdown--red">
    <h4 class="plugin__count--header">Remaining</h4>
    <ul>
        <li class="plugin__count--item" data-role="hour">
            <span class="plugin__count--number">2</span>
            <span class="plugin__count--number">1</span>
            <span class="plugin__count--label">h</span>
        </li>
        <li class="plugin__count--item" data-role="minute">
            <span class="plugin__count--number">3</span>
            <span class="plugin__count--number">9</span>
            <span class="plugin__count--label">m</span>
        </li>
        <li class="plugin__count--item" data-role="second">
            <span class="plugin__count--number">3</span>
            <span class="plugin__count--number">9</span>
            <span class="plugin__count--label">s</span>
        </li>
    </ul>
</div>

<script type="text/javascript">
    $(function () {
        var padTime=padNumber();
        $('#count_down1').countdown('2015/5/26', function (ev) {
            var offset = ev.offset;
            var data={
                hour:padTime(offset.days * 24 + offset.hours),
                minute:padTime(offset.minutes),
                second:padTime(offset.seconds)
            };
            $(this).find('.plugin__count--item').each(function () {
                var role=$(this).data('role');
                $(this).find('.plugin__count--number').eq(0).text(data[role].charAt(0))
                        .end().eq(1).text(data[role].charAt(1));
            });
        });
    });

    function padNumber(width, character) {
        width = width || 2;
        character = character || '0';
        return function (word) {
            word=word+'';
            var fillLenght = width - word.length;
            fillLenght = fillLenght > 0 ? fillLenght : 0;
            var pad=(new Array(fillLenght+1)).join('0');
            return pad+word;
        }
    }
</script>

</body>
</html>